<template>
    <div class="detailContainer" :style="'min-height: '+docheight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="bannerCont">
            <img :src="detailInfo.goods_image+ossSrc" />
        </div>
        <div class="mainCont">
            <div class="goodsName">
                <div class="goodsNameText">{{ detailInfo.goods_name }}</div>
                <div v-if="detailInfo.is_collect==1" @click="canceFn" class="saveBtn iconfont icon-shoucang2"></div>
                <div v-if="detailInfo.is_collect==2" @click="saveFn" class="saveBtn_no iconfont icon-shoucang2"></div>
            </div>
            <div class="goodsDes">{{ detailInfo.goods_describe }}</div>
            <div class="priceCont">
                <div class="priceItem">
                    <span>¥</span>
                    <span style="font-size: 1rem;">{{ detailInfo.goods_price }}</span>
                    <span> / {{ detailInfo.goods_unit }}</span>
                </div>
                <div class="caleItem" v-if="detailInfo.goods_sale>10">销量：{{ detailInfo.goods_sale }}</div>
            </div>
            <div class="typeCont">
                <div class="typeItem" v-if="detailInfo.is_new==1">新品</div>
                <div class="typeItem">{{ detailInfo.activity_name?detailInfo.activity_name:'精选' }}</div>
                <div class="typeItem" v-if="detailInfo.is_pt==2">可拼团</div>
            </div>
        </div>
        <div class="detailImg">
            <img :src="item+ossSrc" :key="index" v-for="(item,index) in detailImg" />
        </div>
        <div class="ctrlCont">
            <div class="leftBtn">
                <div class="goBack" @click="kefuFn">
                    <div class="iconfont icon-kefu2"></div>
                    <div>客服</div>
                </div>
            </div>
            <div class="addBtn" v-if="detailInfo.is_pt==1" @click="showMaskFn(1)">添加购物车</div>
            <div class="addBtn" v-if="detailInfo.is_pt==2" @click="sendGroup">拼团价 ¥{{ detailInfo.pt_price }}</div>
            <div class="buyBtn" @click="showMaskFn(2)">立即购买</div>
        </div>
      </div>
      <van-popup
        v-model:show="goodsMask"
        round
        position="bottom"
        >
        <div class="goodsMaskCont">
            <div class="priceNum">￥{{ getMoney() }}</div>
            <div class="checkNum">
                <div :class="goodsNum==1?'disBtn editBtn iconfont icon-jian1':'editBtn iconfont icon-jian1'" @click="downNum"></div>
                <div class="goodsnum">{{goodsNum}}</div>
                <div class="editBtn iconfont iconfont icon-jia" @click="upNum"></div>
            </div>
            <div class="maskBtn" v-if="detailInfo.is_pt==2">
                <div class="canBuy carBtn" @click="addFn">加入购物车</div>
                <div class="canBuy" @click="buyFn">立即下单</div>
            </div>
            <div class="maskBtn maxBtn" v-if="detailInfo.is_pt==1">
                <div class="canBuy carBtn" v-if="maskType==1" @click="addFn">加入购物车</div>
                <div class="canBuy" v-if="maskType==2" @click="buyFn">立即下单</div>
            </div>
        </div>
        </van-popup>
        <van-popup v-model:show="showTalk" round position="bottom">
            <div class="maskCont">
                <div class="userName">联系商家</div>
                <div class="userErweima">
                    <img src="static/img/erweima.png" />
                </div>
                <div class="userTel">商家热线：18483613963</div>
                <div class="maskBtn" @click="telFn">拨打电话</div>
            </div>
        </van-popup>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>
      <sub-load v-if="showLoad"></sub-load>
    </div>
  </template>
  
  <script>
  import { Swiper,SwiperItem,Toast } from 'vux'
  import getLoad from '@/components/public/getLoad'
  import {details,collect,canceCollect,addCart} from "@/http/api";
  import subLoad from '@/components/public/subLoad.vue'

    import getTimeOut from '@/components/public/getTimeOut'
    export default {
      components: {subLoad,Toast,getLoad,getTimeOut,Swiper,SwiperItem},
      data() {
        return {
          showTimeOut:false,
          showCont:false,          
          goodsMask:false,
          goodsNum:1,
          detailInfo:{},
          detailImg:[],
          showText:'',
          showToast:false,
          maskType:1,
          showLoad:false,
          showTalk:false,
          order_id:'',
          order_type:'',
        }
      },
      props: {},
      methods:{
        telFn(){
            window.location.href = 'tel:18483613963'
        },
        kefuFn(){
            this.showTalk = true
        },
        getMoney(){
            let money = Number(this.detailInfo.goods_price)*this.goodsNum
            return money.toFixed(2)
        },
        addFn(){
            let data= {
                goods_id:this.$route.query.id,
                sum:this.goodsNum
            }
            if(!this.showLoad){
                this.showLoad = true
                addCart(data).then((res)=>{
                    if(res.data.code==1){
                        this.showToast = true
                        this.showText = res.data.msg
                        this.goodsMask = false
                    }else{
                        this.showToast = true
                        this.showText = res.data.msg
                    }
                    this.showLoad = false
                }).catch(()=>{
                    this.showLoad = false
                    this.showToast = true
                    this.showText = '网络请求超时'
                })
            }
        },
        canceFn(){
            let data= {
                goods_id:this.$route.query.id,
            }
            canceCollect(data).then((res)=>{
                if(res.data.code==1){
                    this.showToast = true
                    this.showText = res.data.msg
                    this.getData()
                }else{
                    this.showToast = true
                    this.showText = res.data.msg
                }
            }).catch(()=>{
                this.showToast = true
                this.showText = '网络请求超时'
            })
        },
        saveFn(){
            let data= {
                goods_id:this.$route.query.id,
            }
            collect(data).then((res)=>{
                if(res.data.code==1){
                    this.showToast = true
                    this.showText = res.data.msg
                    this.getData()
                }else{
                    this.showToast = true
                    this.showText = res.data.msg
                }
            }).catch(()=>{
                this.showToast = true
                this.showText = '网络请求超时'
            })
        },
        upNum(){
            this.goodsNum++
            this.getMoney()
        },
        downNum(){
            if(this.goodsNum>1){
                this.goodsNum--
                this.getMoney()
            }
        },
        showMaskFn(type){
            this.maskType = type
            this.goodsMask = true
        },
        sendGroup(){
            let arr = [{goods_id:this.$route.query.id,num:1}]
            arr = JSON.stringify(arr)
            this.$router.push({path:'/orderWait',query:{goods_save:arr,cartIds:'',isGroup:2,order_id:this.order_id,order_type:this.order_type}})
        },
        buyFn(){
            let arr = [{goods_id:this.$route.query.id,num:this.goodsNum}]
            arr = JSON.stringify(arr)
            this.$router.push({path:'/orderWait',query:{goods_save:arr,cartIds:'',isGroup:1}})
        },
        getData(){
            let data ={
                goods_id:this.$route.query.id,
            }
            details(data).then((res)=>{
                if(res.data.code==1){
                    this.detailImg = res.data.data.goods_details_img.split(',')
                    this.detailInfo = res.data.data
                }else{
                    this.showToast = true
                    this.showText = res.data.msg
                }
                this.showCont = true
            }).catch(()=>{
                this.showCont = true
                this.showTimeOut = true
            })
        },
      },
      mounted(){
      },
      created() {
        if(this.$route.query.order_id){
            this.order_id = this.$route.query.order_id
            this.order_type = this.$route.query.order_type
        }
        this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .detailContainer{
    background-color: #f9f1f1;
    padding-bottom: 3.75rem;
    box-sizing: border-box;
    .bannerCont {
      width: 100%;
      font-size: 0;
      img {
        width: 100%;
      }
    }
    .mainCont{
        width: 92%;
        margin: 0 auto;
        box-sizing: border-box;
        background-color: #fff;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        margin-top: 0.75rem;
        position: relative;
        top: -2rem;
        
        border-radius: 0.75rem;
        .goodsName{
            width: 100%;
            margin-bottom: 0.25rem;
            display: flex;
            justify-content: space-between;
            .goodsNameText{
                font-size: 0.7rem;
                width: 2rem;
                flex: 1;
                font-weight: bold;
            }
            .saveBtn,.saveBtn_no{
                margin-left: 0.75rem;
                font-size: 1rem;
                color: #e95551;
            }
            .saveBtn_no{
                color: #999;
            }
        }
        .goodsDes{
            color: #666;
            font-size: 0.6rem;
            margin-bottom: 0.25rem;
        }
        .priceCont{
            display: flex;
            align-items: center;
            color: #999;
            justify-content: space-between;
            .priceItem{
                display: table-cell;
                color: #e95551;
            }
            .caleItem{
                font-size: 0.6rem;
                
            }
        }
        .typeCont{
            background-color: #fff;
            width: 100%;
            margin-top: 0.75rem;
            font-size: 0.6rem;
            box-sizing: border-box;
            // justify-content: space-between;
            overflow-x: auto;
            white-space: nowrap;
            // flex-wrap: wrap;
            .typeItem{
                display: inline-block;
                white-space: nowrap;
                border-radius: 0.15rem;
                padding:0.15rem 0.75rem;
                box-sizing: border-box;
                position: relative;
                margin-right: 0.5rem;
                border:1px solid #e95551;
                color: #e95551;
                text-align: center;
            }
        }
    }
    .detailImg{
        width: 92%;
        margin: 0 auto;
        border-radius: 0.75rem;
        margin-top: -1rem;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        background-color: #fff;
        img{
            border-radius: 0.25rem;
            width: 100%;
        }
    }
    .ctrlCont{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 4%;
        box-sizing: border-box;
        align-items: center;
        .leftBtn{
            flex: 1;
            display: flex;
            align-items: center;
            .goBack{
                padding: 0 0.75rem;
                text-align: center;
                font-size: 0.6rem;
                .iconfont{
                    font-size: 1.2rem;
                }
            }
        }
        .buyBtn,.addBtn{
            font-size: 0.7rem;
            background-color: #e95551;
            color: white;
            padding: 0rem 1rem;
            border-radius: 1rem;
            line-height: 2rem;
            letter-spacing: 0.1rem;
        }
        .addBtn{
            background-color: #fff;
            border: 1px solid #e95551;
            color: #e95551;
            box-sizing: border-box;
            margin-right: 0.75rem;
            text-align: center;
            letter-spacing: 0rem;
        }
    }
    .goodsMaskCont{
        width: 100%;
        padding: 1rem 4%;
        box-sizing: border-box;
        background-color: #f7f7f7;
        position: relative;
        .priceNum{
            margin: 0.5rem 0;
            width: 100%;
            text-align: center;
            font-size: 2rem;
            color: #e95551;
        }
        .checkNum{
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 0.75rem 0;
            .editBtn{
                width: 2.5rem;
                height: 2.5rem;
                font-size: 1.5rem;
                text-align: center;
                line-height: 2.5rem;
                background-color: #e95551;
                color: #fff;
                border-radius: 50%;
            }
            .disBtn{
                opacity: 0.4;
            }
            .goodsnum{
                height: 2.5rem;
                width: 5rem;
                line-height: 2.5rem;
                text-align: center;
                font-size: 1.5rem;
            }
            }
        .maskBtn{
            // margin: 1.25rem 0 0.75rem;
            margin-top: 1.75rem;
            width: 100%;
            border-radius: 0.25rem;
            // overflow: hidden;
            display: flex;
            .canBuy{
                width: 50%;
                font-size: 0.7rem;
                text-align: center;
                background-color: #e95551;
                color: white;
                border: 1px solid #e95551;
                padding: 0.75rem 0;
                border-radius: 0 2rem 2rem 0;
            }
            .carBtn{
                border: 1px solid #e95551;
                color: #e95551;
                background-color: #fff;
                // background-color: #fd9e46;
                border-radius: 2rem 0 0 2rem ;
            }
        }
        .maxBtn{
            .canBuy{
                width: 100%;
                border-radius: 2rem;
            }
        }
    }
    .maskCont{
        width: 100%;
        padding: 1.25rem 4%;
        box-sizing: border-box;
        text-align: center;
        
        .userName{
        font-size: 0.9rem;
        font-weight: bold;
        text-align: center;
        margin: 0.5rem 0;
        }
        .userErweima{
        width: 100%;
        margin-bottom: 0.25rem;
        text-align: center;
        img{
            height: 5rem;
        }
        }
        .statusText{
        text-align: center;
        color: #e95551;
        margin-bottom: 0.25rem;
        }
        .maskBtn{
        width: 100%;
        background-color: #e95551;
        color: #fff;
        text-align: center;
        padding: 0.75rem 0;
        margin-top: 1.25rem;
        border-radius: 1.5rem;
        }
    }
  }
  </style>